<template>
  <div class="chart-settings-container">
    <a-form layout="vertical">
      <!-- 基本设置 -->
      <a-form-item label="图表标题">
        <a-input v-model:value="localOptions.title.text" placeholder="请输入图表标题" @change="emitUpdate" />
      </a-form-item>
      
      <!-- 树图设置 -->
      <a-divider>树图设置</a-divider>
      
      <a-form-item label="叶子节点间隙">
        <a-slider 
          v-model:value="localOptions.series[0].leafDepth"
          :min="0" 
          :max="5" 
          :step="0.1"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="显示标签">
        <a-switch v-model:checked="localOptions.series[0].label.show" @change="emitUpdate" />
      </a-form-item>
      
      <a-form-item label="上边距">
        <a-input-number 
          v-model:value="localOptions.grid.top" 
          :min="0" 
          :max="100" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="右边距">
        <a-input-number 
          v-model:value="localOptions.grid.right" 
          :min="0" 
          :max="100" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="下边距">
        <a-input-number 
          v-model:value="localOptions.grid.bottom" 
          :min="0" 
          :max="100" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="左边距">
        <a-input-number 
          v-model:value="localOptions.grid.left" 
          :min="0" 
          :max="100" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <!-- 视觉映射 -->
      <a-divider>视觉映射设置</a-divider>
      
      <a-form-item label="启用视觉映射">
        <a-switch v-model:checked="visualMapEnabled" @change="toggleVisualMap" />
      </a-form-item>
      
      <template v-if="visualMapEnabled">
        <a-form-item label="最小值">
          <a-input-number 
            v-model:value="localOptions.visualMap.min" 
            :min="0" 
            style="width: 100%"
            @change="emitUpdate" 
          />
        </a-form-item>
        
        <a-form-item label="最大值">
          <a-input-number 
            v-model:value="localOptions.visualMap.max" 
            :min="0" 
            style="width: 100%"
            @change="emitUpdate" 
          />
        </a-form-item>
        
        <a-form-item label="最小值颜色">
          <a-input 
            v-model:value="visualMapMinColor" 
            type="color"
            style="width: 100px" 
            @change="updateVisualMapColors" 
          />
        </a-form-item>
        
        <a-form-item label="最大值颜色">
          <a-input 
            v-model:value="visualMapMaxColor" 
            type="color"
            style="width: 100px" 
            @change="updateVisualMapColors" 
          />
        </a-form-item>
      </template>
      
      <!-- 数据设置 -->
      <a-divider>数据设置</a-divider>
      
      <a-alert
        message="树图数据结构较为复杂，建议在代码中直接设置数据"
        type="info"
        show-icon
        style="margin-bottom: 16px"
      />
      
      <a-form-item label="名称字段">
        <a-input 
          v-model:value="nameField" 
          placeholder="节点名称字段, 默认为 name" 
          @change="updateNameField" 
        />
      </a-form-item>
      
      <a-form-item label="值字段">
        <a-input 
          v-model:value="valueField" 
          placeholder="节点值字段, 默认为 value" 
          @change="updateValueField" 
        />
      </a-form-item>
      
      <a-form-item label="子节点字段">
        <a-input 
          v-model:value="childrenField" 
          placeholder="子节点字段, 默认为 children" 
          @change="updateChildrenField" 
        />
      </a-form-item>
      
      <!-- 样式设置 -->
      <a-divider>样式设置</a-divider>
      
      <a-form-item label="边框宽度">
        <a-input-number 
          v-model:value="localOptions.series[0].itemStyle.borderWidth" 
          :min="0" 
          :max="5" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="边框颜色">
        <a-input 
          v-model:value="localOptions.series[0].itemStyle.borderColor" 
          type="color"
          style="width: 100px" 
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="高亮边框宽度">
        <a-input-number 
          v-model:value="localOptions.series[0].emphasis.itemStyle.borderWidth" 
          :min="0" 
          :max="5" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';

const props = defineProps({
  options: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update:options']);

// 本地存储options，用于编辑
const localOptions = ref<any>({
  title: {
    text: '树图',
    show: true
  },
  tooltip: {
    formatter: '{b}: {c}'
  },
  series: [{
    type: 'treemap',
    data: [
      {
        name: '类别1',
        value: 40,
        children: [
          { name: '子项1', value: 10 },
          { name: '子项2', value: 30 }
        ]
      },
      {
        name: '类别2',
        value: 60,
        children: [
          { name: '子项3', value: 25 },
          { name: '子项4', value: 35 }
        ]
      }
    ],
    leafDepth: 1,
    label: {
      show: true
    },
    upperLabel: {
      show: true
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1
    },
    emphasis: {
      itemStyle: {
        borderColor: '#333',
        borderWidth: 2
      }
    }
  }],
  grid: {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
  }
});

// 视觉映射相关
const visualMapEnabled = ref(false);
const visualMapMinColor = ref('#c6e48b');
const visualMapMaxColor = ref('#196127');

// 数据字段配置
const nameField = ref('name');
const valueField = ref('value');
const childrenField = ref('children');

// 切换视觉映射
const toggleVisualMap = (enabled: boolean) => {
  if (enabled) {
    // 如果启用，添加视觉映射配置
    localOptions.value.visualMap = {
      type: 'continuous',
      min: 0,
      max: 100,
      inRange: {
        color: [visualMapMinColor.value, visualMapMaxColor.value]
      }
    };
  } else {
    // 如果禁用，移除视觉映射配置
    delete localOptions.value.visualMap;
  }
  emitUpdate();
};

// 更新视觉映射颜色
const updateVisualMapColors = () => {
  if (!localOptions.value.visualMap) return;
  
  localOptions.value.visualMap.inRange = {
    color: [visualMapMinColor.value, visualMapMaxColor.value]
  };
  
  emitUpdate();
};

// 更新名称字段
const updateNameField = () => {
  // 这里只是更新配置，实际数据重命名需要在后端处理
  emitUpdate();
};

// 更新值字段
const updateValueField = () => {
  // 这里只是更新配置，实际数据重命名需要在后端处理
  emitUpdate();
};

// 更新子节点字段
const updateChildrenField = () => {
  // 这里只是更新配置，实际数据重命名需要在后端处理
  emitUpdate();
};

// 向父组件发送更新的options
const emitUpdate = () => {
  emit('update:options', { ...localOptions.value });
};

// 初始化
onMounted(() => {
  // 深拷贝props的options
  if (props.options) {
    localOptions.value = JSON.parse(JSON.stringify(props.options));
    
    // 确保必要的属性存在
    if (!localOptions.value.title) {
      localOptions.value.title = { text: '树图', show: true };
    }
    
    if (!localOptions.value.series || !localOptions.value.series.length) {
      localOptions.value.series = [{
        type: 'treemap',
        data: [],
        leafDepth: 1,
        label: { show: true },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          itemStyle: {
            borderColor: '#333',
            borderWidth: 2
          }
        }
      }];
    }
    
    // 确保类型为treemap
    if (localOptions.value.series[0] && localOptions.value.series[0].type !== 'treemap') {
      localOptions.value.series[0].type = 'treemap';
    }
    
    // 初始化grid
    if (!localOptions.value.grid) {
      localOptions.value.grid = {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
      };
    }
    
    // 初始化视觉映射状态
    visualMapEnabled.value = !!localOptions.value.visualMap;
    
    if (visualMapEnabled.value && localOptions.value.visualMap.inRange?.color) {
      visualMapMinColor.value = localOptions.value.visualMap.inRange.color[0] || '#c6e48b';
      visualMapMaxColor.value = localOptions.value.visualMap.inRange.color[localOptions.value.visualMap.inRange.color.length - 1] || '#196127';
    }
  }
});

// 监听props.options变化
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    localOptions.value = JSON.parse(JSON.stringify(newOptions));
    
    // 更新视觉映射状态
    visualMapEnabled.value = !!localOptions.value.visualMap;
    
    if (visualMapEnabled.value && localOptions.value.visualMap.inRange?.color) {
      visualMapMinColor.value = localOptions.value.visualMap.inRange.color[0] || '#c6e48b';
      visualMapMaxColor.value = localOptions.value.visualMap.inRange.color[localOptions.value.visualMap.inRange.color.length - 1] || '#196127';
    }
  }
}, { deep: true });
</script>

<style scoped>
.chart-settings-container {
  padding: 16px;
}
</style> 